<template>
	<view class="contentBody">
		<view class="gongao_icon_box">
			<view class="icon_box">
				<view class="cela" v-for="(item,index) in statusList" :key="index" :class="item.paper_class">
					<text>{{item.paper_title}}</text>
					<view class="jiacu_text consola_Coolc">{{item.paper_value}}</view>
				</view>
			</view>
			<u-notice-bar @click="noticeLink" :text="noticeList" type="none"></u-notice-bar>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			statusList: {
				type: Array,
				default () {
					return [];
				}
			},
			noticeList: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.dinwei_baox {
		width: 750rpx;
		margin-top: 44rpx;
		position: absolute;
		left: 0px;
		color: #ffffff;
		padding: 0 28rpx;
		z-index: 99;
		justify-content: flex-start;
		align-items: center;

		text {
			padding-left: 8rpx;
			font-size: 28rpx;
		}
	}

	.topPhotoBox {
		width: 750rpx;
		height: 500rpx;
		background: url(~@/static/coolc/index_bg.jpg) no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		position: relative;

		.car_box {
			width: 389rpx;
			height: 215rpx;
			background: url(~@/static/coolc/car.png) no-repeat;
			background-size: 100% auto;
			position: absolute;
			bottom: 70rpx;
			left: 50%;
			margin-left: -195rpx;
			animation: move 1.667s linear infinite;
		}

		.treequan {
			width: 750rpx;
			height: 750rpx;
			background: url(~@/static/coolc/tree.png) no-repeat;
			background-size: 100% auto;
			position: absolute;
			left: 0px;
			right: 0px;
			top: 360rpx;
			animation: 12s linear infinite ROTATE;
		}
	}

	.gongao_icon_box {
		width: 694rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 99;
		margin-top: 60rpx;
		position: absolute;
		left: 28rpx;
		box-shadow: 0 0 5px #dedede;

		.icon_box {
			width: 694rpx;
			justify-content: space-around;
			display: flex;
			border-bottom: 1px solid #eeeeee;
			align-items: center;
			padding: 20rpx;

			.cela {
				width: 220rpx;
				height: 84rpx;
				padding-left: 92rpx;
				text-align: left;
				background-repeat: no-repeat;
				background-size: 84rpx 84rpx;
				background-position: 0 top;
				box-sizing: border-box;

				text {
					color: #999999;
					font-size: 24rpx;
				}

				.jiacu_text {
					font-size: 32rpx;
					font-weight: bolder;
					color: #000000;
				}
			}

			.icon_cel_1 {
				background-image: url(~@/static/coolc/i-t-1.png);
			}

			.icon_cel_2 {
				background-image: url(~@/static/coolc/i-t-2.png);
			}

			.icon_cel_3 {
				background-image: url(~@/static/coolc/i-t-3.png);
			}
		}
	}

	.bannerBox {
		width: 694rpx;
		padding-top: 170rpx;
		padding-bottom: 26rpx;
		margin: 0 auto;
	}

	.class_boxs {
		width: 100%;
		justify-content: space-between;
		display: flex;
		flex-flow: row wrap;
		padding-top: 24rpx;

		.cols {
			width: 335rpx;
			height: 200rpx;
			padding: 24rpx 160rpx 24rpx 30rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			position: relative;

			.subName {
				font-size: 30rpx;
				font-weight: bolder;
				color: #ffffff;
				padding-bottom: 8rpx;
			}

			.subTitle {
				font-size: 24rpx;
				color: #ffffff;

				text {
					padding-right: 12rpx;
				}
			}

			.order_btn {
				width: 103rpx;
				height: 31rpx;
				background: url(~@/static/coolc/order_btn.png) no-repeat;
				background-size: 100% auto;
				position: absolute;
				left: 30rpx;
				bottom: 24rpx;
			}

			.r_icon {
				width: 160rpx;
				height: 200rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-position: center;
				background-repeat: no-repeat;
				background-size: auto 140rpx;
			}
		}

		.color_1_icon {
			background: linear-gradient(to right, #76dc8f, #16b281);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_1.png);
				background-size: 110rpx 130rpx;
			}
		}

		.color_2_icon {
			background: linear-gradient(to right, #92dbff, #2eb5ff);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_2.png);
				background-size: 120rpx 130rpx;
			}
		}

		.color_3_icon {
			background: linear-gradient(to right, #b5cef1, #8eaad7);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_3.png);
			}
		}

		.color_4_icon {
			background: linear-gradient(to right, #ffb43f, #ff8a00);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_4.png);
			}
		}
	}

	.mapBox {
		margin-top: 20rpx;
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
	}
</style>